<template>
    <!-- 购物车弹窗 -->
    <z-popup 
        position="bottom"
        z-index="80"
        :overlay-style="{background: 'transparent'}"
        :style="cartStyle"
        @close="onClose"
    >
        <div class="cm-cart-clear" @click="signStore.ClearCart">
            <img class="cm-cart-clear__icon" :src="v_cart_clear" alt="SVG Icon" />
            <div class="cm-cart-clear__text">清空购物车</div>
        </div>
        <div class="popup-shopping-cart">
            <div class="cm-cart-cell" v-for="v,k in signStore.cartList">
                <div class="cm-cart-cell__cover" :style="{ backgroundImage: `url(${v.attachment})` }"></div>
                <div class="cm-cart-cell__main">
                    <div class="cm-cart-cell__title">
                        <span class="cm-cart-cell__desc">{{v.goodsName}}</span>
                    </div>
                    <div class="cm-cart-cell__detail">{{v.flavor}}</div>
                    <div class="cm-cart-cell__footer">
                        <div class="cm-cart-cell__money">￥{{v.salePrice}}</div>
                        <z-stepper 
                            disable-input 
                            :min="0" 
                            v-model="v.num" 
                            @plus="onHandleOrder('plus', v)"
                            @minus="onHandleOrder('minus', v)"
                            @change="onChange(v)"
                        />
                    </div>
                </div>
            </div>
        </div>
    </z-popup>
</template>
<script setup>
import useSignStore from '@/store/sign'
import useConfigStore from '@/store/config'

import v_cart_clear from '@/assets/svg/common/v_cart_clear.svg'

const cartStyle = 'background: #45454C;border-radius:24px 24px 0px 0px;bottom:60px;maxHeight:263px'
const signStore = useSignStore()
const configStore = useConfigStore()

const emits = defineEmits(['close']);
const onClose = ()=>{
    emits('close')
}

const onHandleOrder = (type, item)=>{
    const product = {
        ...item,
        mathType: type
    }
    signStore.RefreshCart(product)
}

const onChange = (item)=>{
    // if (item.type == 0 && item.flavor == '') {
        signStore.UpdateNumFromProductList(item)
    // }
}

</script>
<style scoped lang="scss">

.popup-shopping-cart {
    margin: 20px 16px;

    .cm-cart-cell:first-child {
        padding-top: 0;
    }

    .cm-cart-cell__desc {
        margin-left: 0;
    }
}

</style>